import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment, { isDate } from 'moment';
import router from 'umi/router';
import { Form, Input, Select, Button, Collapse } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DetailsList from '@/components/DetailsList';
import styles from '@/pages/Detail.less';
import classNames from 'classnames';
import { formatCodeVal } from '@/pages/Common/common';
import { queryFileList, filterAddFile, filterDeteteFile,formatPrice, queryDict } from '@/utils/common';

import { allDictList } from '@/utils/constans';

import {allDispatchType} from './utils'
import { beWork, beAssume,processMode } from '@/utils/constans';


const FormItem = Form.Item;
const { Option } = Select;
const Panel = Collapse.Panel;
const dateFormat = 'YYYY-MM-DD';
@connect(({ Endorse, component }) => ({
  Endorse,
  endorseDetail:Endorse.endorseDetail,
  dictObject: component.dictObject,
}))
@Form.create()
class EndorseDetails extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      checkId: '',
      activeKey: ['1', '2'],
      fileList:[],
    };
  }
  componentDidMount() {
    console.log('this.props.checkId',this.props.checkId)
    this.setState({
      checkId: this.props.checkId,
    });
   this.getDetail()
   this.queryFileList(this.props.checkId)
  }
  componentWillMount() {
    // 查询字典项
    const allDict = [allDictList.currencyType, ];
    queryDict({ props: this.props, allDict });
  }

  queryFileList = id => {
    queryFileList({
      props: this.props,
      params: { bizId: id, fileBizType: 'ENDORSEMENT' },
      callback: data => {
        if (!data) return;
        this.setState({ fileList: data });
      },
    });
  };
  // queryFileList = id => {
  //   queryFileList({
  //     props: this.props,
  //     params: { bizId: id, fileBizType: 'ENDORSEMENT' },
  //     callback: data => {
  //       if (!data) return;
  //       this.fileList = data;
  //       this.props.form.setFieldsValue({ fileTokens: data });
  //     },
  //   });
  // };
  getDetail=()=>{
    const {dispatch} =this.props
    dispatch({
      type:allDispatchType.detail,
      payload: { id: this.props.checkId },
    })
  }
  callback = key => {
    this.setState({
      activeKey: key,
    });
  };

  render() {
  
    const {
      isMobile,
      endorseDetail ,
      checkId,
      dictObject,
    } = this.props;
    const { fileList }= this.state 
    const details = endorseDetail[checkId] ? endorseDetail[checkId] : {};
    const customPanelStyle = {
      borderRadius: 4,
      marginBottom: 12,
      border: 0,
      overflow: 'hidden',
    };
    
    const _beWork = details
      ? formatCodeVal(beWork, details.beWork)
      : '';
    const _processMode = details
    ? formatCodeVal(processMode, details.processMode)
    : '';
    
    const _beAssume = details ? formatCodeVal(beAssume, details.beAssume) : '';
    const forfeit = details ? formatPrice(details.forfeit) : '';
   

    const fieldsCost = [
      { key: 'vehicleName', name: '车牌号', },
      { key: 'driverName', name: '驾驶员' },
      { key: _beWork, name: '是否在职', isConst: true },
      { key: 'trafficOffenceTime', name: '交通违法时间' },
      { key: _processMode, name: '处理方式' ,isConst: true},
      { key: 'trafficOffenceAddress', name: '交通违法地点' },
      { key: _beAssume, name: '是否公司承担', isConst: true },
      { key: 'trafficOffenceProject', name: '交通违法项目',  },
      { key: forfeit, name: '罚款',isConst: true },
      { key: 'scoring', name: '记分',  },
      { key: 'lawEnforcement', name: '执法单位', },
      { key: 'handlingInformation', name: '处理情况',  },
      { key: 'handlingDate', name: '处理日期', },
      { key: 'fileTokens', name: '附件', isFile: fileList },
     
    ];
   
    return (

      <div className={styles.CollapseDetails}>
        <PageHeaderWrapper>
          <Collapse
            activeKey={this.state.activeKey}
            onChange={key => this.callback(key)}
            bordered={false}
          >
            <Panel header="基础信息" key="1" className={styles.customPanelStyle}>
              <div>
                <DetailsList
                  isMobile={isMobile}
                  detilsData={{
                    fields: fieldsCost, 
                    value: details,
                    fileList: this.state.fileList,
                  }}
                />
              </div>
            </Panel>
            {/* <Panel header="费用详情" key="2" className={styles.customPanelStyle}>
              <div>
                <DetailsList
                  isMobile={isMobile}
                  detilsData={{
                    fields: fieldsCost,
                    value: details,
                    fileList: this.state.fileList,
                  }}
                />
              </div>
            </Panel> */}
          </Collapse>
        </PageHeaderWrapper>
      </div>
    );
  }
}
export default EndorseDetails;
